<template>
  <h1>效果页面</h1>

  <el-input v-model="datas_x" placeholder="请输入名称" clearable style="width: 200px"/>
  <el-button type="primary" @click="search1">搜索</el-button>


  <!--  {{ data }}-->
  <div v-for="item in data" :key="item.id">
    <div class="img">
      <img :src="item.image" alt="" width="100" height="100" @click="detail(item.id)">
      <div style="padding: 2px">
        <p>{{ item.name }}</p>
        <p>描述：{{ item.description }}</p>
      </div>
      <div style="padding-left: 10px">
        <p>数量： {{ item.num }}</p>
        <p> 价格：{{ item.price }}</p>

      </div>
      <div style="padding-left: 50px">
        <el-button type="primary" @click="order1(item)">
          预定
        </el-button>
      </div>
    </div>
  </div>

  <el-pagination
      v-model:current-page="query.page"
      v-model:page-size="query.size"
      :page-sizes="[100, 200, 300, 400]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from "vue-router";
import axios from "axios";
import router from "@/router/index.js";

const total = ref(0)
const query = ref({
  page: 1,
  size: 2,
  name: '',
  price: '',
  start_time: '',
})

const handleSizeChange = (val) => {
  query.value.size = val
  query.value.page = 1
  getData()
}
const handleCurrentChange = (val) => {
  query.value.page = val
  getData()
}


const data = ref([])

const route = useRoute()
const id = route.query.id
console.log(id)

const datas_x = ref('')
// 搜索
const search1 = () => {
  // 前端写的datas_x有数字和中文，和日期，判断输入的是数字还是日期还是中文
  if (/^\d+$/.test(datas_x.value)) {
    query.value.price = datas_x.value
  } else if (/^(\d{4})-(\d{2})-(\d{2})$/.test(datas_x.value)) {
    query.value.start_time = datas_x.value
  } else {
    query.value.name = datas_x.value
  }
  getData()
}


const order1 = (info) => {
  console.log(info)

  // router.push({path: '/register', query: {id: id}})
}
const detail = (id) => {
  console.log(id)
  router.push({path: '/about', query: {id: id}})
}


const getData = () => {
  axios.post(`http://localhost:8000/app/bed/?page=${query.value.page}&size=${query.value.size}&name=${query.value.name}&price=${query.value.price}&start_time=${query.value.start_time}`, {id: id})
      .then(res => {
        console.log(res.data)
        data.value = res.data.results
        total.value = res.data.count
        datas_x.value = ''

      })
}


onMounted(() => {
  getData()
})


</script>

<style>
.img {
  margin: 10px;
  padding: 20px;
  display: flex;
}
</style>